<template>
  <el-container>
    <el-main id="largemain">
      <div class="box">
        <div class="sale">
          <div class="sale-number">
            <div class="money">
              <p>销售额（元）</p>

              <p>
                <count-to
                  :startVal="0"
                  :endVal="56799"
                  :duration="3000"
                ></count-to>
              </p>
              <p>较昨日+0.35%</p>
            </div>
            <div class="separate"></div>
            <div class="number">
              <p>销售量</p>
              <p>
                <count-to
                  :startVal="0"
                  :endVal="599"
                  :duration="3000"
                ></count-to>
              </p>
              <p>较昨日+0.28%</p>
            </div>
          </div>

          <div class="sale-after">
            <div class="after">
              <p>售后</p>
              <p>69</p>
              <p>较昨日-0.45%</p>
            </div>
            <span class="separate"></span>
            <div class="refund">
              <p>退款数量</p>
              <p>23</p>
              <p>较昨日-0.15%</p>
            </div>
            <span class="separate"></span>
            <div class="examine">
              <p>人员审核</p>
              <p>10</p>
              <p>更新时间：<span>2022.10.16</span></p>
            </div>
            <span class="separate"></span>
            <div class="stay">
              <p>待办事项</p>
              <p>38</p>
              <p>更新时间：<span>2022.10.16</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="chart-information">
        <div id="chart"></div>
        <div class="information">
          <h1>公告信息</h1>
          <ul>
            <li @click="drawer = true">
              <div class="point"></div>
              新人公告案例工作工资客户要求
            </li>
            <el-drawer
              v-model="drawer"
              title="岳阳楼记"
              :direction="direction"
              :before-close="handleClose"
            >
              <span class="font"
                >庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上，属予作文以记之。
                予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯，朝晖夕阴，气象万千，此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？
                若夫淫雨霏霏，连月不开，阴风怒号，浊浪排空，日星隐曜，山岳潜形，商旅不行，樯倾楫摧，薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。
                至若春和景明，波澜不惊，上下天光，一碧万顷，沙鸥翔集，锦鳞游泳，岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。
                嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲，居庙堂之高则忧其民，处江湖之远则忧其君。是进亦忧，退亦忧。然则何时而乐耶？其必曰“先天下之忧而忧，后天下之乐而乐”乎！噫！微斯人，吾谁与归？
                时六年九月十五日。</span
              >
            </el-drawer>
            <li>
              <div class="point"></div>
              新人公告案例工作工资客户要求
            </li>
            <li>
              <div class="point"></div>
              新人公告案例工作工资客户要求
            </li>
            <li>
              <div class="point"></div>
              新人公告案例工作工资客户要求
            </li>
            <li>
              <div class="point"></div>
              新人公告案例工作工资客户要求
            </li>
            <li>
              <div class="point"></div>
              新人公告案例工作工资客户要求
            </li>
            <li>
              <div class="point"></div>
              新人公告案例工作工资客户要求
            </li>
          </ul>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { ElMessageBox } from "element-plus";
const drawer = ref(false);
const direction = ref("rtl");
onMounted(() => {
  var myChart = echarts.init(document.getElementById("chart") as HTMLElement);
  myChart.setOption({
    title: {
      text: "实时收款",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data1: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "9:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14：00",
        "15:00",
        "16:00",
        "17:00",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        data: [
          100000, 200000, 400000, 300000, 250000, 300000, 350000, 250000,
          420000,
        ],
      },
    ],
  });
});

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure you want to close this?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
</script>
<style lang="less">
.font {
  width: auto;

  margin-left: 1px;

  float: left;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 16px;

  color: #5f5f5f;

  line-height: 35px;

  text-transform: uppercase;
}
.el-main {
  background-color: #ffffff;
  .box {
    display: flex;
    flex-direction: column;

    .sale {
      display: flex;
      flex: 1;

      .sale-number {
        height: 160px;
        flex: 1;
        margin-right: 10px;
        display: flex;
        background-color: #b4dbe7;

        .money {
          height: 160px;
          flex: 1.5;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          p:nth-child(1) {
            font-size: 12px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #000000;
          }

          p:nth-child(2) {
            font-size: 30px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #f65e5e;
            margin: 20px 0px 20px 0px;
          }

          p:nth-child(3) {
            font-size: 12px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #000000;
            text-indent: -50px;
          }
        }
        .separate {
          width: 2px;
          height: 30px;
          background-color: #464646;
          margin-top: 65px;
        }

        .number {
          height: 160px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          p:nth-child(1) {
            font-size: 12px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #000000;
          }

          p:nth-child(2) {
            font-size: 30px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #fb0000;
            margin: 20px 0px 20px 0px;
          }

          p:nth-child(3) {
            font-size: 12px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #000000;
          }
        }
      }

      .sale-after {
        height: 160px;
        flex: 2;
        display: flex;
        background-color: #b4dbe7;
        div {
          height: 160px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          p:nth-child(1) {
            font-size: 12px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #030303;
          }

          p:nth-child(2) {
            font-size: 30px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #030303;
            margin: 20px 0px 20px 0px;
          }

          p:nth-child(3) {
            font-size: 12px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #030303;
          }
        }
        .separate {
          display: block;
          width: 2px;
          height: 30px;
          background-color: #464646;
          margin-top: 65px;
        }
      }
    }

    .chart-information {
      display: flex;
      margin-top: 16px;
      flex: 3;

      .chart {
        height: 400px;
        flex: 2;
        border: 1px solid #030303;
      }

      .information {
        height: 400px;
        flex: 1;
        border: 1px solid #030303;
        margin-left: 17px;
      }
    }
  }
}
.chart-information {
  display: flex;
  margin-top: 16px;
  flex: 3;

  #chart {
    height: 400px;
    width: 739px;
    flex: 2;
    // border: 1px solid #030303;
    background-color: #b4dbe7;
  }

  .information {
    // height: 400px;
    flex: 1;
    // border: 1px solid #030303;
    margin-left: 17px;
    background-color: #b4dbe7;

    h1 {
      font-size: 18px;
      margin: 10px 0px 0px 15px;
    }

    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;

      li {
        width: 270px;
        height: 40px;
        // border: 1px solid #030303;
        margin-top: 5px;
        border-radius: 5px;
        background-color: #92d3fc;
        text-indent: 10px;
        line-height: 40px;
        font-size: 14px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #060606;
        cursor: pointer;
        position: relative;
        .point {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #03c2fc;
          position: absolute;
          top: 15px;
          left: -20px;
        }
      }
    }
  }
}
</style>
